<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <script src="https://openlayers.org/en/v4.5.0/build/ol.js" type="text/javascript"></script>
    <title>地图切换</title>
</head>
<body>
<p>地图1</p>
<div id="map1" style="width: 300px"></div>
<p>地图2</p>
<div id="map2" style="width:400px"></div>
<input type="button" onClick="swapMap();" value="切换地图" />
<script>
    // 创建第一个地图
    var map1 = new ol.Map({
        layers: [
            new ol.layer.Tile({source: new ol.source.OSM()})
        ],
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        }),
        target: 'map1'
    });

    // 创建第二个地图
    var map2 = new ol.Map({
        layers: [
            new ol.layer.Tile({source: new ol.source.OSM()})
        ],
        view: new ol.View({
            center: [0, 0],
            zoom: 2
        }),
        target: 'map2'
    });

    function swapMap() {
        // 改变两个地图的容器
        map1.setTarget('map2');
        map2.setTarget('map1');
    }
</script>
</body>
</html>